<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>算力订单</title>
  <link rel="stylesheet" href="css/iview.css">
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.min.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
    .s-tit {
      padding: 20px 30px;
    }
    .h-tit {
      padding: 30px 0;
      font-size: 16px;
      color: #333;
    }
    .data-m {
      padding: 0 30px 30px 30px;
    }
    .page-w {
      padding: 20px 20px 30px 20px;
    }
    .foz .ivu-form-item-content {
      color: #666;
      font-size: 14px;
    }
    .t_dv {
      font-size: 14px;
    }
    
    
    .query-head {
      display: flex;
    }
    .date-pick-fix {
      width: 285px;
      height: 30px;
      line-height: 27px;
      display: flex;
      border-radius: 3px;
      border: 1px solid #eee;
      overflow: hidden;
      margin-right: 30px;
    }
    .date-pick-fix li {
      flex: 1;
      font-size: 14px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 3px;
      cursor: pointer;
    }
    .date-pick-fix li:nth-child(odd) {
      background: #f3f4f4;
    }
    .date-pick-fix li.on {
      background: #0e9cf2;
      color: #fff;
    }
    .f-query {
      flex: 1;
      margin-bottom: 5px;
    }
  </style>
</head>

<body>
  <div class="wrapper center" id="app" v-cloak file-name="hashOrder">
    <div class="main">
      <section class="panel data-m">
        <h1 class="h-tit">算力订单</h1>
        <div class="query-head">
          <ul class="date-pick-fix">
            <li :class="{on : dateActive === index}" @click="choseTabDate(index)" v-for="(item, index) of dateChose"
              :key="index">{{item}}</li>
          </ul>
          <i-form class="f-query" :model="query" label-position="right" ref="query" inline @keyup.enter.native="clickQuery">

            <form-item class="w270" label="日期查询 : ">
              <date-picker class="w200" type="daterange" placement="bottom-center" @on-change="setDateRange" v-model="query.cTime"
                placeholder="请选择日期查询"></date-picker>
            </form-item>
            <form-item>
              <i-button type="primary" class="sb-btn" @click="clickQuery">查询</i-button>
              <!-- <i-button type="reset" class="reset-btn" @click="formReset('query')">重置</i-button> -->
            </form-item>
            <form-item class="foz">支付金额 : {{G.toThousandsRound(payTotal)}} TAIC</form-item>
          </i-form>
        </div>
        <i-table class="mb10" :class="{loading: tbLoading}" :columns="columns1" :data="list" size="small" border
          no-data-text="没有相关数据"></i-table>
        <div class="page-w" v-if="list.length">
          <Page :total="sizeCount" :page-size="pageSize" :current="currentPage" @on-change="changePage" show-total
            show-elevator />
        </div>
      </section>
    </div>
  </div>

  <script src="js/iview.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/global.js"></script>
  <script>
    var sTimer = null
    var vm = new Vue({
      el: '#app',
      data: {
        tbLoading: true,
        currentPage: 1,
        pageSize: 10,
        totalNumber: 0,
        sizeCount: 0,
        dateActive: 0,
        isRunTimer: false,
        dateType: -1,

        payTotal: 0,

        query: {
          StartDate: '',
          EndDate: '',
          cTime: [],
        },
        dateChose: ['全部', '本月', '上月', '最近3月'],
        columns1: [{
            title: '创建时间',
            key: 'createTime',
            width: 210,
            align: 'center',
            render(h, params) {
              var time = params.row.createTime
              var text = G.getFormatTime(time).slice(0, -3)
              return h('div', text)
            },
          },
          {
            title: '算力订单',
            key: 'orderId',
            width: 210,
            align: 'center',
          },
          {
            title: '购买数量(TH)',
            key: 'orderTh',
            width: 210,
            align: 'center',
          },
          {
            title: '支付金额(TAIC)',
            key: 'total',
            width: 210,
            align: 'center',
          },
          {
            title: '订单状态',
            key: 'payStatus',
            align: 'center',
            render: (h, params) => {
              var arr = ['', '未支付', '已支付', '支付失败']
              var status = params.row.payStatus;
              var due = params.row.due
              var co = ['', '#49a9ee', '#666', '#f22']
              var text = arr[status]
              var curs = status == 1 ? 'pointer' : 'default';

              return h('span', {
                style: {
                  color: status == 1 && due <= 0 ? '#e61' : co[status],
                  cursor: curs,
                  padding: '3px 6px',
                },
                on: {
                  click: () => {
                    var _order = params.row
                    if (due > 0 && status == 1) {
                      localStorage.setItem('order_info', JSON.stringify(_order))
                      G.to('buyHash_hashCacl')
                    } else {
                      console.log('支付已超时')
                    }
                  }
                }
              }, text)
            },
          },
          {
            title: ' ',
            key: 'second',
            minWidth: 150,
            align: 'center',
            render: (h, params) => {
              var oid = params.row.orderId
              var status = params.row.payStatus
              var due = params.row.due
              var min = parseInt(due / 60, 10)
              var sec = ((due % 60) + '').replace(/^(\d)$/, '0$1')
              var tx1 = '您还有'
              var tx2 = '来完成付款'
              var shutText = '支付超时, 关闭订单'
              var res1 = h('div', {
                  class: 't_dv',
                },
                [
                  h('span', tx1),
                  h('span', {
                    style: {
                      color: '#ed5565',
                    },
                  }, min + ':' + sec),
                  h('span', tx2)
                ]
              )
              var res2 = h('div', shutText)
              if (due > 0 && status == 1) {
                return res1
              } else if (due <= 0 && status == 1) {
                //this.func11(oid)
                return res2
              } else {
                return ' '
              }
            },
          },
        ],
        list: [
          // {
          //   createTime: 1550415485136,
          //   orderId: 'TESAR8888888000001',
          //   orderTh: '5000',
          //   total: '1000',
          //   status: 1,
          //   createTime: 1543580301584,
          //   effeTime: 1544086853027,
          // },

        ]
      },
      methods: {
        init() {
          this.requestList()
          this.findOrderTotalSUM()
        },

        // 点击右侧查询
        clickQuery() {
          this.currentPage = 1
          this.dateType = -1
          this.dateActive = 0
          this.requestList()
        },

        setDateRange(arr) {
          this.query.StartDate = arr[0]
          this.query.EndDate = arr[1]
        },

        func11(order) {
          var url = '/order/updateOrderStaus/' + order
          //var data = G.paramsSerializer(zdata)
          axios.post(url).then(res => {});
        },
        findOrderTotalSUM() {
          var url = '/order/findOrderTotalSUM'

          axios.post(url).then(res => {
            this.payTotal = res.data.data
          });
        },
        // 查询数据
        requestList(query) {
          query = query || this.query
          this.tbLoading = true
          var realUrl = '/order/pageListAlls';
          var mockUrl = 'https://www.easy-mock.com/mock/5b880b4195c42459d2486aa1/cs/zs' || realUrl;
          var url = G.isMock() ? mockUrl : realUrl

          var ydata = {
            last: this.dateType,
            currentPage: this.currentPage,
            pageSize: this.pageSize || 1,
          }
          var zdata = Object.assign(query, ydata);
          var data = G.paramsSerializer(zdata)

          // 立即提交
          axios.post(url, data).then(res => {
              if (res.data.code == 1) {
                this.tbLoading = false
                // this.sizeCount = res.data.data.pageCount
                this.sizeCount = res.data.data.pageCount
                this.list = res.data.data.listModel.map(v => {
                  v.due = Math.floor((v.effeTime - Date.now()) / 1000)
                  return v
                })
                if (!this.isRunTimer) {
                  this.timerRun()
                  this.isRunTimer = true
                }
              }
            })
            .catch(err => {
              console.log(err)
            });
        },

        // 选择日期查询
        choseTabDate(index) {
          var arr = [-1, 0, 1, 2];
          this.dateActive = index
          this.dateType = arr[index]
          this.query.cTime = []
          this.query.StartDate = ''
          this.query.EndDate = ''
          this.currentPage = 1
          this.requestList()
        },

        // 计时函数
        timerRun() {
          sTimer = setInterval(() => {
            var now = Date.now()
            this.list.forEach(v => {
              v.due = Math.floor((v.effeTime - now) / 1000)
            })
          }, 1e3)
        },

        // 判断list是否为空
        isListEmpty() {
          return this.list.length === 0
        },

        // 重置表单
        formReset(name) {
          this.$refs[name].resetFields()
        },
        // 分页
        changePage(page) {
          this.currentPage = page
          this.requestList()
        },
      },
      conmputed: {},
      mounted() {
        this.init()
      },
    })
  </script>
</body>

</html>